import React, {Component, createRef} from 'react'
import styles from './index.module.css'

export default class Sticky extends Component {
  placeholder = createRef()
  content = createRef()
  componentDidMount () { // 首次dom渲染完毕触发，获取dom
    window.addEventListener('scroll', this.handleScroll)
  }
  componentWillUnmount () { // 组件移除生命周期函数
    // 解绑事件
    window.removeEventListener('scroll', this.handleScroll)
  }
  handleScroll =() => {
    // 获取DOM对象
  const placeholderEl = this.placeholder.current // 占位元素 目的是content浮动起来了，防止下方的往上冲
  const contentEl = this.content.current // 原有内容
  // 获取到内容元素距离顶部的距离
  const { top, height } = contentEl.getBoundingClientRect()
  // console.log(top)
  if (top < 0) {
    contentEl.classList.add(styles.fiexed) // 满足触发条件，则添加类名，让被包裹的组件变为粘性定位
    placeholderEl.style.height = height + 'px'
  } else if (top === 0 && window.pageYOffset === 0){
    contentEl.classList.remove(styles.fiexed) // 触发解除粘性定位
    placeholderEl.style.height = '0px'
  }
  }
  render () {
    return (
      <div>
        {/* 占位元素 */}
        <div ref={this.placeholder}></div>
        {/* 原有内容 */}
        <div ref= {this.content}>
          {this.props.children}
        </div>
      </div>
    )
  }
}